<template>
    <h4>预设分栏</h4>
    <a-row class="DefaultSetting" :gutter="8">
        <a-col :span="6" v-for="item in DefaultSetting">
            <a-row class="ViewSetting" @click="UseSetting(item)">
                <a-col :span="child" class="ViewSettingItem" v-for="child in item">{{ child }}</a-col>
            </a-row>
        </a-col>
    </a-row>

    <a-row class="DefaultSetting" :gutter="16">
        <a-col :span="12">
            <h4>分栏设置</h4>
            <draggable
                class="LayoutView"
                v-model="ChooseSetting"
                :component-data="{
                    tag: 'div',
                    type: 'transition-group',
                    name: !drag ? 'flip-list' : null,
                }"
                v-bind="{
                    animation: 200,
                    group: 'Element',
                    disabled: false,
                    ghostClass: 'ghost',
                }"
                @start="drag = true"
                itemKey="o"
                @end="drag = false"
                handle=".Move"
            >
                <template #item="{ element, index }">
                    <div class="InputNumber">
                        <span class="Move">||&nbsp;&nbsp;&nbsp; Col : </span>
                        <a-input-number style="width: 170px" v-model:value="ChooseSetting[index].n" :min="1" :max="24"></a-input-number>
                        <span class="Delete" @click="DeleteItem(index)">
                            <DeleteOutlined />
                        </span>
                    </div>
                </template>
            </draggable>
            <a-button type="dashed" style="width: 270px" block @click="addItem">
                <template #icon>
                    <PlusOutlined />
                </template>
                Add
            </a-button>
        </a-col>
        <a-col :span="12">
            <h4>间距设置</h4>
            <a-button :type="gutter == 0 ? 'primary' : ''" @click="gutter = 0">0</a-button> &nbsp;
            <a-button :type="gutter == 8 ? 'primary' : ''" @click="gutter = 8">8</a-button> &nbsp;
            <a-button :type="gutter == 16 ? 'primary' : ''" @click="gutter = 16">16</a-button> &nbsp;
            <a-button :type="gutter == 24 ? 'primary' : ''" @click="gutter = 24">24</a-button>
            <br />
            <br />
            <a-input-number style="width: 270px" v-model:value="gutter" :min="0" :max="24"></a-input-number>
            <br />
            <br />
            <h4>class 设置</h4>
            <a-input style="width: 270px" v-model:value="ClassName"></a-input>
        </a-col>
    </a-row>

    <h4>预览</h4>
    <a-row class="ViewSetting" :gutter="gutter || 0">
        <a-col :span="item.n" v-for="item in ChooseSetting">
            <div class="ViewSettingItem">{{ item.n }}</div>
        </a-col>
    </a-row>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { PlusOutlined, DeleteOutlined } from "@ant-design/icons-vue";
import draggable from "vuedraggable";
// import RowNumber from './RowNumber.vue';

const props = defineProps(["gutter", "Cols"]);

var Order = 0;

const DefaultSetting = ref([[24], [12, 12], [8, 8, 8], [6, 6, 6, 6], [6, 12, 6], [8, 16], [16, 8], [10, 14]]);

const ChooseSetting = ref([]);

const ClassName = ref("");

const drag = ref(false);

function addItem() {
    ChooseSetting.value.push({ n: 1, o: Order });
    Order++;
}

function UseSetting(item) {
    var _data = [];
    for (let i = 0; i < item.length; i++) {
        const element = item[i];
        _data.push({ n: element, o: Order });
        Order++;
    }
    ChooseSetting.value = _data;
}

onMounted(() => {
    for (let i = 0; i < props.Cols.length; i++) {
        const element = props.Cols[i];
        ChooseSetting.value.push({ n: element, o: Order });
        Order++;
    }
});

const gutter = ref(props.gutter);

const DeleteItem = (index) => {
    ChooseSetting.value.splice(index, 1);
};

defineExpose({
    GetValue: function () {
        return {
            Cols: ChooseSetting.value.map((i) => i.n),
            gutter: gutter.value,
            class: ClassName.value,
        };
    },
});
</script>
<style scoped>
.Move {
    cursor: move;
}

.InputNumber {
    margin-bottom: 8px;
}

.Delete {
    padding-left: 8px;
}

.DefaultSetting {
    display: flex;
}

.ViewSetting {
    margin-bottom: 8px;
    cursor: pointer;
    border: 1px solid transparent;
}

.DefaultSetting .ViewSetting:hover {
    background-color: #2e47b7aa;
    border-color: #2e47b7;
}

.ViewSettingItem {
    border: 1px dashed #2e47b7;
    text-align: center;
}

.ChooseSetting {
    margin-bottom: 8px;
}
</style>
